Home Explore Help
Register Sign In
jamesperet
/
codex
Watch 1
Star 0
Fork 0

Browse Source
ACE editor installed and note view/edit buttons to appbar

James Peret 8 years ago
parent
e33644d143
commit
f89f69591c
14 changed files with 287 additions and 65 deletions
Show Diff Stats
  1. 7 4
      app/index.html
  2. 17 4
      app/scripts/codex-app.js
  3. 2 1
      app/scripts/controllers/app-ctrl.js
  4. 43 0
      app/scripts/controllers/header-ctrl.js
  5. 0 51
      app/scripts/controllers/note-ctrl.js
  6. 93 0
      app/scripts/controllers/note-edit-ctrl.js
  7. 91 0
      app/scripts/controllers/note-view-ctrl.js
  8. 5 0
      app/scripts/controllers/sidebar-ctrl.js
  9. 2 1
      app/views/markdown-note.html
  10. 11 0
      app/views/note-edit.html
  11. 3 0
      app/views/note-view.html
  12. 0 3
      app/views/note.html
  13. 2 1
      bower.json
  14. 11 0
      css/codex.css

+ 7 - 4
app/index.html
View File 

@@ -9,15 +9,18 @@
9 9 
     <link rel="stylesheet" href="../css/codex.css">
10 10
11 11 
     <!-- Javascript -->
12 
+    <script src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
12 13 
     <script src="../bower_components/angular/angular.js"></script>
13 14 
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
14 15 
     <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
16 
+    <script src="../bower_components/angular-ui-ace/ui-ace.js"></script>
15 17
16 18 
     <script src="scripts/codex-app.js"></script>
17 19 
     <script src="scripts/controllers/app-ctrl.js"></script>
18 20 
     <script src="scripts/controllers/header-ctrl.js"></script>
19 21 
     <script src="scripts/controllers/sidebar-ctrl.js"></script>
20 
-    <script src="scripts/controllers/note-ctrl.js"></script>
22 
+    <script src="scripts/controllers/note-view-ctrl.js"></script>
23 
+    <script src="scripts/controllers/note-edit-ctrl.js"></script>
21 24 
     <script src="scripts/services/file-service.js"></script>
22 25 
     <script src="scripts/services/date-formatter.js" charset="utf-8"></script>
23 26 
   </head>
 
@@ -32,10 +35,10 @@
32 35 
             <span class="icon icon-plus"></span>
33 36 
           </button>
34 37 
           <div class="btn-group pull-right">
35 
-            <button class="btn btn-default">
38 
+            <button class="btn btn-default" ng-class="noteEditBtnClass" ng-click="activateNoteEdit()">
36 39 
               <span class="icon icon-pencil"></span>
37 40 
             </button>
38 
-            <button class="btn btn-default active">
41 
+            <button class="btn btn-default" ng-class="noteViewBtnClass" ng-click="activateNoteView()">
39 42 
               <span class="icon icon-eye"></span>
40 43 
             </button>
41 44 
           </div>
 
@@ -49,7 +52,7 @@
49 52 
           <div class="pane pane-sm sidebar" ng-controller="SidebarCtrl">
50 53 
             <nav class="nav-group">
51 54 
               <h5 class="nav-group-title">My Notes</h5>
52 
-              <span class="nav-group-item active" ui-sref="index">
55 
+              <span class="nav-group-item active" ng-click="goToAllNotes()">
53 56 
                 <span class="icon icon-archive"></span>
54 57 
                 All Notes
55 58 
               </span>

+ 17 - 4
app/scripts/codex-app.js
View File 

@@ -11,10 +11,12 @@ angular
11 11 
   .module('codexApp', [
12 12 
     'ui.router',
13 13 
     'ngSanitize',
14 
+    'ui.ace',
14 15 
     'codexApp.index',
15 16 
     'codexApp.header',
16 17 
     'codexApp.sidebar',
17 
-    'codexApp.note'
18 
+    'codexApp.noteView',
19 
+    'codexApp.noteEdit'
18 20 
   ])
19 21
20 22 
   .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {
 
@@ -34,10 +36,21 @@ angular
34 36 
       templateUrl: 'views/index.html',
35 37 
       controller: 'AppCtrl'
36 38 
     })
37 
-    .state('note', {
39 
+    .state('note-view', {
38 40 
       url: "/notes",
39 
-      templateUrl: "views/note.html",
40 
-      controller: 'NoteCtrl',
41 
+      templateUrl: "views/note-view.html",
42 
+      controller: 'NoteViewCtrl',
43 
+      resolve: {
44 
+        pageData: function($stateParams) {
45 
+          console.log('resolve ok')
46 
+          return 'resolve ok';
47 
+        },
48 
+      }
49 
+    })
50 
+    .state('note-edit', {
51 
+      url: "/notes",
52 
+      templateUrl: "views/note-edit.html",
53 
+      controller: 'NoteEditCtrl',
41 54 
       resolve: {
42 55 
         pageData: function($stateParams) {
43 56 
           console.log('resolve ok')

+ 2 - 1
app/scripts/controllers/app-ctrl.js
View File 

@@ -67,7 +67,8 @@ angular.module('codexApp.index', [])
67 67 
       //console.log($location.path());
68 68 
       console.log("openning note " + note.title + " (" + note.id + ")");
69 69 
       FileService.setCurrentNote(note)
70 
-      $state.go("note");
70 
+      $rootScope.$broadcast('main-window:note-view');
71 
+      $state.go("note-view");
71 72 
       //$location.path('/notes/' + 'test1')
72 73 
       //console.log($location.path());
73 74 
     }

+ 43 - 0
app/scripts/controllers/header-ctrl.js
View File 

@@ -12,4 +12,47 @@ angular.module('codexApp.header', [])
12 12
13 13 
     console.log('Header loaded')
14 14
15 
+    $scope.noteViewBtnClass = "";
16 
+    $scope.noteEditBtnClass = "";
17 
+
18 
+    $scope.activateNoteView = function() {
19 
+      $rootScope.$broadcast('activate-note-view');
20 
+      $state.go("note-view");
21 
+      $scope.noteViewBtnClass = "active";
22 
+      $scope.noteEditBtnClass = "";
23 
+    }
24 
+
25 
+    $scope.activateNoteEdit = function() {
26 
+      $rootScope.$broadcast('activate-note-edit');
27 
+      $state.go("note-edit");
28 
+      $scope.noteViewBtnClass = "";
29 
+      $scope.noteEditBtnClass = "active";
30 
+    }
31 
+
32 
+    $rootScope.$on('main-window:note-list', function() {
33 
+      if(!$scope.$$phase) {
34 
+        $scope.$apply(function(){
35 
+          $scope.noteViewBtnClass = "";
36 
+          $scope.noteEditBtnClass = "";
37 
+        });
38 
+      } else {
39 
+        $scope.noteViewBtnClass = "";
40 
+        $scope.noteEditBtnClass = "";
41 
+      }
42 
+      //console.log($scope.raw_data);
43 
+    });
44 
+
45 
+    $rootScope.$on('main-window:note-view', function() {
46 
+      if(!$scope.$$phase) {
47 
+        $scope.$apply(function(){
48 
+          $scope.noteViewBtnClass = "active";
49 
+          $scope.noteEditBtnClass = "";
50 
+        });
51 
+      } else {
52 
+        $scope.noteViewBtnClass = "active";
53 
+        $scope.noteEditBtnClass = "";
54 
+      }
55 
+      //console.log($scope.raw_data);
56 
+    });
57 
+
15 58 
   }]);

+ 0 - 51
app/scripts/controllers/note-ctrl.js
View File 

@@ -1,51 +0,0 @@
1 
-
2 
-
3 
-/**
4 
- * @ngdoc function
5 
- * @name domainManagerApp.controller:AboutCtrl
6 
- * @description
7 
- * # AboutCtrl
8 
- * Controller of the domainManagerApp
9 
- */
10 
-angular.module('codexApp.note', [])
11 
-  .controller('NoteCtrl',['$scope', '$rootScope', '$state', 'FileService', function ($scope,  $rootScope, $state, FileService) {
12 
-
13 
-    var marked = require('marked');
14 
-    var filesystem = require("fs");
15 
-
16 
-    console.log('Note opened!')
17 
-
18 
-    $scope.note = FileService.getCurrentNote();
19 
-    $scope.container = "note-container";
20 
-
21 
-
22 
-
23 
-    filesystem.readFile($scope.note.path, function(err, data) {
24 
-      var str = String.fromCharCode.apply(null, data);
25 
-      if(!$scope.$$phase) {
26 
-        $scope.$apply(function(){
27 
-          $scope.note.data = marked(str);
28 
-        });
29 
-      } else {
30 
-          $scope.note.data = marked(str);
31 
-      }
32 
-      //console.log($scope.note);
33 
-      var a = document.getElementsByTagName('a'), ajax;
34 
-      for (var i=0; i<a.length; ++i) {
35 
-         a[i].addEventListener('click', handleAnchor, false);
36 
-      }
37 
-      function handleAnchor(e){
38 
-          e.preventDefault();
39 
-          if(ajax) ajax.abort();
40 
-          ajax = new XMLHttpRequest();
41 
-          ajax.onload = updateContent;
42 
-          ajax.open("get", this.href, true);
43 
-          ajax.send();
44 
-          console.log("-> Prevented link from opening: " + e.srcElement.href);
45 
-      }
46 
-      function updateContent() {
47 
-          // Do something with `this.responseText`
48 
-      }
49 
-    });
50 
-
51 
-  }]);

+ 93 - 0
app/scripts/controllers/note-edit-ctrl.js
View File 

@@ -0,0 +1,93 @@
1 
+
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('codexApp.noteEdit', [])
11 
+  .controller('NoteEditCtrl',['$scope', '$rootScope', '$state', 'FileService', function ($scope,  $rootScope, $state, FileService) {
12 
+
13 
+    var marked = require('marked');
14 
+    var filesystem = require("fs");
15 
+
16 
+    console.log('Note opened!')
17 
+
18 
+    $scope.note = FileService.getCurrentNote();
19 
+    $scope.container = "note-container";
20 
+    $scope.raw_data = "";
21 
+    $scope.showNoteView = true;
22 
+    $scope.showNoteEdit = false;
23 
+
24 
+
25 
+    filesystem.readFile($scope.note.path, function(err, data) {
26 
+      var str = String.fromCharCode.apply(null, data)
27 
+      if(!$scope.$$phase) {
28 
+        $scope.$apply(function(){
29 
+          $scope.note.data = str;
30 
+          $scope.raw_data = str
31 
+        });
32 
+      } else {
33 
+          $scope.note.data = str;
34 
+          $scope.raw_data = str;
35 
+      }
36 
+      //console.log($scope.raw_data);
37 
+      var a = document.getElementsByTagName('a'), ajax;
38 
+      for (var i=0; i<a.length; ++i) {
39 
+         a[i].addEventListener('click', handleAnchor, false);
40 
+      }
41 
+      function handleAnchor(e){
42 
+          e.preventDefault();
43 
+          if(ajax) ajax.abort();
44 
+          ajax = new XMLHttpRequest();
45 
+          ajax.onload = updateContent;
46 
+          ajax.open("get", this.href, true);
47 
+          ajax.send();
48 
+          console.log("-> Prevented link from opening: " + e.srcElement.href);
49 
+      }
50 
+      function updateContent() {
51 
+          // Do something with `this.responseText`
52 
+      }
53 
+    });
54 
+
55 
+    $scope.marked = function(str) {
56 
+      return marked(str);
57 
+    }
58 
+
59 
+    $rootScope.$on('activate-note-view', function() {
60 
+      if(!$scope.$$phase) {
61 
+        $scope.$apply(function(){
62 
+          $scope.showNoteView = true;
63 
+          $scope.showNoteEdit = false;
64 
+        });
65 
+      } else {
66 
+        $scope.showNoteView = true;
67 
+        $scope.showNoteEdit = false;
68 
+      }
69 
+    });
70 
+
71 
+    $rootScope.$on('activate-note-edit', function() {
72 
+      if(!$scope.$$phase) {
73 
+        $scope.$apply(function(){
74 
+          $scope.showNoteView = false;
75 
+          $scope.showNoteEdit = true;
76 
+        });
77 
+      } else {
78 
+        $scope.showNoteView = false;
79 
+        $scope.showNoteEdit = true;
80 
+      }
81 
+      //console.log($scope.raw_data);
82 
+    });
83 
+
84 
+    $scope.aceLoaded = function(_editor) {
85 
+       _editor.setReadOnly(false);
86 
+      console.log($scope.raw_data);
87 
+    };
88 
+
89 
+    $scope.aceChanged = function(e) {
90 
+      console.log("-> Note data changed.");
91 
+    };
92 
+
93 
+  }]);

+ 91 - 0
app/scripts/controllers/note-view-ctrl.js
View File 

@@ -0,0 +1,91 @@
1 
+
2 
+
3 
+/**
4 
+ * @ngdoc function
5 
+ * @name domainManagerApp.controller:AboutCtrl
6 
+ * @description
7 
+ * # AboutCtrl
8 
+ * Controller of the domainManagerApp
9 
+ */
10 
+angular.module('codexApp.noteView', [])
11 
+  .controller('NoteViewCtrl',['$scope', '$rootScope', '$state', 'FileService', function ($scope,  $rootScope, $state, FileService) {
12 
+
13 
+    var marked = require('marked');
14 
+    var filesystem = require("fs");
15 
+
16 
+    console.log('Note opened!')
17 
+
18 
+    $scope.note = FileService.getCurrentNote();
19 
+    $scope.container = "note-container";
20 
+    $scope.raw_data = "";
21 
+
22 
+
23 
+    filesystem.readFile($scope.note.path, function(err, data) {
24 
+      var str = String.fromCharCode.apply(null, data)
25 
+      if(!$scope.$$phase) {
26 
+        $scope.$apply(function(){
27 
+          $scope.note.data = str;
28 
+          $scope.raw_data = str
29 
+        });
30 
+      } else {
31 
+          $scope.note.data = str;
32 
+          $scope.raw_data = str;
33 
+      }
34 
+      //console.log($scope.raw_data);
35 
+      var a = document.getElementsByTagName('a'), ajax;
36 
+      for (var i=0; i<a.length; ++i) {
37 
+         a[i].addEventListener('click', handleAnchor, false);
38 
+      }
39 
+      function handleAnchor(e){
40 
+          e.preventDefault();
41 
+          if(ajax) ajax.abort();
42 
+          ajax = new XMLHttpRequest();
43 
+          ajax.onload = updateContent;
44 
+          ajax.open("get", this.href, true);
45 
+          ajax.send();
46 
+          console.log("-> Prevented link from opening: " + e.srcElement.href);
47 
+      }
48 
+      function updateContent() {
49 
+          // Do something with `this.responseText`
50 
+      }
51 
+    });
52 
+
53 
+    $scope.marked = function(str) {
54 
+      return marked(str);
55 
+    }
56 
+
57 
+    $rootScope.$on('activate-note-view', function() {
58 
+      if(!$scope.$$phase) {
59 
+        $scope.$apply(function(){
60 
+          $scope.showNoteView = true;
61 
+          $scope.showNoteEdit = false;
62 
+        });
63 
+      } else {
64 
+        $scope.showNoteView = true;
65 
+        $scope.showNoteEdit = false;
66 
+      }
67 
+    });
68 
+
69 
+    $rootScope.$on('activate-note-edit', function() {
70 
+      if(!$scope.$$phase) {
71 
+        $scope.$apply(function(){
72 
+          $scope.showNoteView = false;
73 
+          $scope.showNoteEdit = true;
74 
+        });
75 
+      } else {
76 
+        $scope.showNoteView = false;
77 
+        $scope.showNoteEdit = true;
78 
+      }
79 
+      //console.log($scope.raw_data);
80 
+    });
81 
+
82 
+    $scope.aceLoaded = function(_editor) {
83 
+       _editor.setReadOnly(false);
84 
+      console.log($scope.raw_data);
85 
+    };
86 
+
87 
+    $scope.aceChanged = function(e) {
88 
+      console.log("-> Note data changed.");
89 
+    };
90 
+
91 
+  }]);

+ 5 - 0
app/scripts/controllers/sidebar-ctrl.js
View File 

@@ -12,4 +12,9 @@ angular.module('codexApp.sidebar', [])
12 12
13 13 
     console.log('Sidebar loaded')
14 14
15 
+    $scope.goToAllNotes = function() {
16 
+      $rootScope.$broadcast('main-window:note-list');
17 
+      $state.go("index");
18 
+    }
19 
+
15 20 
   }]);

+ 2 - 1
app/views/markdown-note.html
View File 

@@ -1,3 +1,4 @@
1 1 
 <div class="note-container">
2 
-  <div class="note" ng-bind-html="note.data"></div>
2 
+  <div class="note" ng-bind-html="note.data" style="visibility: hidden;"></div>
3 
+  <div ui-ace>{{note.data}}</div>
3 4 
 </div>

+ 11 - 0
app/views/note-edit.html
View File 

@@ -0,0 +1,11 @@
1 
+<div class="editor-container">
2 
+  <div ui-ace="{
3 
+    useWrapMode : true,
4 
+    showGutter: true,
5 
+    theme:'tomorrow_night_eighties',
6 
+    mode: 'markdown',
7 
+    firstLineNumber: 1,
8 
+    onLoad: aceLoaded,
9 
+    onChange: aceChanged
10 
+  }" ng-model="raw_data"></div>
11 
+</div>

+ 3 - 0
app/views/note-view.html
View File 

@@ -0,0 +1,3 @@
1 
+<div class="note-container">
2 
+  <div class="note" ng-bind-html="marked(note.data)"></div>
3 
+</div>

+ 0 - 3
app/views/note.html
View File 

@@ -1,3 +0,0 @@
1 
-<div class="note-container">
2 
-  <div class="note" ng-bind-html="note.data"></div>
3 
-</div>

+ 2 - 1
bower.json
View File 

@@ -22,6 +22,7 @@
22 22 
     "angular": "~1.4.7",
23 23 
     "angular-ui": "~0.4.0",
24 24 
     "angular-ui-router": "~0.2.15",
25 
-    "angular-sanitize": "~1.4.7"
25 
+    "angular-sanitize": "~1.4.7",
26 
+    "angular-ui-ace": "~0.2.3"
26 27 
   }
27 28 
 }

+ 11 - 0
css/codex.css
View File 

@@ -16,3 +16,14 @@
16 16 
   background-color: white;
17 17 
   margin: 25px;
18 18 
 }
19 
+
20 
+.ace_editor { height: 100%; }
21 
+
22 
+.editor-container {
23 
+  background-color: #F6F6F6;
24 
+  padding-top: 0px;
25 
+  height: 100%;
26 
+  overflow-y: overlay;
27 
+}
28 
+
29 
+.ace_content { cursor: text; }